<style lang="stylus" scoped>
@import '../common/stylus/index.styl'
  .carlist
    width 100%
    & > div
      position absolute
      bottom 0
      width 100%
    .title
      display flex
      height 40px
      background #f3f5f7
      padding 0 18px
      line-height 40px
      borderbotton(rgba(7,17,27,0.1))
      p
        font-size 14px
        font-weight 100
        color rgb(7,17,27)
        line-height 40px
        flex 1
      span
        font-size 12px
        color rgb(0,160,220)
        line-height 40px
    .list
      background #ffffff
      max-height 240px
      overflow-y auto
      li
        display flex
        height 48px
        align-items center
        margin 0 18px
        .name
          font-size 14px
          color rgb(7,17,27)
          flex 1
        .price
          margin-left 18px
          margin-right 12px
          font-size 14px
          font-weight 700
          color rgb(240,20,20)
        .carbtn
          display flex
          .num
            font-size 10px
            color rgb(147,153,159)
            line-height 24px;
            width 24px
            text-align center
          i
            font-size 24px
            color rgb(0,160,220)
            line-height 24px
</style>

<template>
  <div class="carlist">
    <div>
      <div class="title">
        <p>购物车</p>
        <span @click="closeall(foods)">清空</span>
      </div>
      <ul class="list">
        <li :key="index" v-for="(food,index) in foods" v-show="food.num">
          <p class="name">{{food.name}}</p>
          <p class="price">￥{{food.price}}</p>
          <div class="carbtn">
            <span @click="prev(food,foods.length)" v-show="food.num" class="btn prev"><i class="iconfont icon-jian"></i></span>
            <span v-show="food.num" class="num">{{food.num}}</span>
            <span @click="add(food)" class="btn add"><i class="iconfont icon-jia"></i></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    goods:{
      type:Array
    },
    carlist:{
      type:Boolean
    }
  },
  computed:{
    foods() {
      let foods = []
      this.goods.map(function(good){
        good.foods.map(function(food){
          if(food.num){
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  methods:{
    add (food) {
      food.num++
    },
    prev (food,length) {
      food.num--
      if(!(length-1) && !food.num) {
        this.$emit('iscarlist',false)
      }
    },
    closeall (foods) {
      foods.map(function(food){
        food.num = 0
      })
      this.$emit('iscarlist',false)
    }
  }
}
</script>
